<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>vue07</title>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<style>
    #id {
        margin: 20px auto;
    }

    .wrapper {
        background: #f6f6f6;
        width: 500px;
        padding: 30px;
    }

    ul {
        padding: 0
    }

    li {
        list-style-type: none;
        font-family: '微软雅黑';
        font-size: 18px;
    }

    input {
        line-height: 26px;
        margin: 6px 0;
    }

    button {
        line-height: 26px;
    }

    .span {
        color: skyblue;
    }

    .changecolor {
        color: #ccc;
        text-decoration: line-through;
    }
</style>

<body>
    <div id="id">
        <div class="wrapper">
            <h1>todo-list任务列表</h1>
            <h2>任务总数 {{arr.length}} 还有:{{no()}} 未完成 <span class="span" @click='worked()'>[完成]</span> </h2>
            <ul>
                <li v-for='(item, index) in arr' @click='fn(index)' v-bind:class='{changecolor:item.bol}'><input type="checkbox" v-model='item.bol'>{{item.bol}}
                    <span v-text='item.des' v-show='!item.edit' @click='edit(index)'></span>
                    <input type="text" v-model='item.des' v-show='item.edit' @blur='item.edit=false'>
                </li>
                <input type="text" name="" id="" placeholder="填入新任务" v-model='msg'> <button @click='add()'>添加</button>
            </ul>
        </div>
    </div>

    <script>
        var vm = new Vue({
            el: '#id',
            data: {
                arrr: ['aaaa', 'bbbbb', 'cccccc'],
                arr: [{
                        des: '设计产品原型',
                        bol: false,
                        edit: false
                    },
                    {
                        des: '设计师切图',
                        bol: false,
                        edit: false
                    },
                    {
                        des: '程序研发代码',
                        bol: false,
                        edit: false
                    },
                    {
                        des: '设施反应bug',
                        bol: false,
                        edit: false
                    }
                ],
                msg: '',
                msg2: ''
            },
            methods: {
                add: function() {
                    this.arr.push({ des: this.msg, bol: false });
                    this.msg = '';
                },
                fn: function(index) {

                },
                edit: function(index) {
                    if (!this.arr[index].bol) {
                        this.arr[index].edit = true;
                    }
                },
                no: function() {
                    var num = 0;
                    this.arr.forEach(item => {
                        if (!item.bol) {
                            num++;
                        }
                    });
                    return num;
                },
                worked: function() {
                    var temp = this.arr;
                    this.arr = [];
                    for (var i = 0; i < temp.length; i++) {
                        if (!temp[i].bol) {
                            this.arr.push(temp[i])
                        }
                    }
                }
            }
        });
    </script>
</body>

</html>